<template>
  <el-table :data="data" border style="width: 100%">
    <el-table-column type="selection" />
    <el-table-column prop="approval_id" label="审批编号" />
    <el-table-column prop="approval_type" label="审批类型" />
    <el-table-column prop="status" label="当前状态" />
    <el-table-column prop="request_user" label="申请人" />
    <el-table-column prop="request_date" label="申请时间" />
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button @click="show();showhome(row)">查看</el-button>
        <el-button type="primary" @click="showShenPi(row)">审批</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="yuyuyu">
    <el-pagination :page-sizes="[10, 20, 30, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"
      @current-change="page => loadList(page)" />
  </div>

  <el-dialog v-model="dialogVisible" width="45%" :close-on-click-modal="false" :close-on-press-escape="false" top="5vh"
    :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <span :id="titleId" :class="titleClass">查看审批</span>
        <el-icon @click="close" class="closestylus">
          <Close />
        </el-icon>
      </div>
    </template>
    <el-card class="box-card1">
      <tosochankan :showData="showData"/>
    </el-card>
  </el-dialog>
</template>

<script setup lang="ts">

import { ElMessage, ElMessageBox } from 'element-plus'

import type { Action } from 'element-plus'


import { reactive, ref } from 'vue';
import { useDialogVisible, useUserList } from '../hooks'
import useMessageStore from "@/stores/xiaoxi"
import tosochankan from '../tosochankan/index.vue'
import { messageshenpiApis,messageshenpiShenpi } from "@/services/xiaoxi"
const [dialogVisible, setDialogVisible] = useDialogVisible()

const [data, total, loadList] = useUserList()



// 查看
interface Iwasch {
      contractNumber: string;
      contractName: string;
      customerName: string;
      contractAmount: number;
      contractStatus: string;
      contractType: string;
      contractFile: string;
      relatedProduct: string;
      signer: string;
      signDate: string;
      expireDate: string;
      paymentMethod: string;
      advancePayment: number;
      note: string;
}

//dig弹窗
const show=()=>{
  dialogVisible.value = true
}

//查看方法
const showData=ref<any>({})


const showhome = async (row:any)=>{
  let ret = await messageshenpiApis(row.approval_id)
  // console.log(ret.data);
  showData.value=ret.data
  // console.log(showData);
}




const date=ref<any>({})

const showShenPi= async  (row:any)=>{
  ElMessageBox.confirm(
    '确定要审批吗',
    '审批提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    // try {
    //   let ret = await messageshenpiShenpi(row.approval_id)
    // } catch (error) {
    //   ElMessage({
    //     type: 'info',
    //     message: '取消审批',
    //   })
      
    // }
    .then (async () => {
      let ret = await messageshenpiShenpi(row.approval_id)
      if(ret.code===200){
        loadList()
      }
      ElMessage({
        type: 'success',
        message: '审批成功',
      })
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '取消审批',
      })
    })
}




// const showhome = async (row: any) => {
//   dialogVisible.value = true
//  useMessageStore.
//   console.log(code);
// }
// const setId = () => {
//   // const ids: number[] = data.value
//   console.log(data.value);
// }

// interface IProps{
//     total:number
//     data:Imessage.Xiaoxi[]
//     loadData:(page?: number) => Promise<void>
//     setDialogVisible:(visible:boolean)=>void
// }

// const props=defineProps<IProps>()

</script>

<style lang="scss" scoped>
.yuyuyu {
  width: 600px;
  margin: auto;
  margin-top: 15px;
}


.my-header {
  width: 100%;
  // height: 50px;
  // background-color: rgba(54, 126, 234, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;

  span {
    width: 90%;
    text-align: center;
  }

  i {
    margin-right: 10px;
  }

  .closestylus {
    cursor: pointer;
  }


}
</style>

